<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .tab{
            width: 500px;
            margin: 10px auto;
        }
        .menu li{
            height: 30px;
            width: 100px;
            margin: 0 5px;
            border: 1px solid #cccccc;
            user-select: none;
            text-align: center;
            line-height: 30px;
            border-radius: 5px;
            cursor: pointer;
        }
        .menu li.active{
            background: orangered;
            color: white;
        }
        .content li{
            display: none;
        }
        .content li:first-child{
            display: block;
        }
    </style>
</head>
<body>
    <div class="tab">
        <ul class="menu flex">
            <li class="active">中国</li>
            <li>美国</li>
            <li>德国</li>
        </ul>
        <ul class="content">
            <li>中国中国中国中国中国中国</li>
            <li>美国美国美国美国美国美国</li>
            <li>德国德国德国德国德国德国</li>
        </ul>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        //$('.menu li')返回3个li，同时添加点击事件
        $('.menu li').click(function(){
            //$(this) 将触发事件的DOM对象转为jQuery对象
            //因为只有转成jQuery对象后，才能使用它的方法
            //index()方法，返回当前对象的索引
            let index = $(this).index()
            //addClass()方法，就是添加样式
            $(this).addClass('active').siblings('.active').removeClass('active')
            //eq()方法，根据索引，返回对应的元素
            //show()方法，就是显示元素，内部就是对style.display="block"的封装。
            //hide()方法，就是隐藏元素，内部就是对style.display="none"的封装。
            $('.content li').eq(index).show().siblings().hide()
        })
    </script>
</body>
</html>